﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/QuizAdmin.Master" AutoEventWireup="true" CodeBehind="CompareApplicants.aspx.cs" Inherits="BladeTecWebApplication.Admin.CompareApplicants" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<link class="include" rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script><![endif]-->

<script class="include" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>

<script class="code" type="text/javascript">

	function drawLevelsGraph() {
		var levelSeries = [];
		var names = [];

		var levels = $("#MainContent_hfLevels").val().substring(0, $("#MainContent_hfLevels").val().length - 1).split('|');
		
		var hiddenFields = $("input[type='hidden']");
		for (var i = 0; i < hiddenFields.length; i++) {
			if ($(hiddenFields[i]).attr('id').indexOf("attemptLevelInfo") > -1) {
				var data = $(hiddenFields[i]).val();
				names.push(data.substring(0, data.indexOf('|')));
				var ls = data.substring(data.indexOf('|') + 1, data.length - 1);
				levelSeries.push(ls.split(','));
			}
		}
		var colors = [
			"#CCC",
			"#DC291E",
			"#1B3FE0",
			"#1BE022",
			"#FFA200",
			"#45CAFF",
			"#DC291E",
			"#1B3FE0",
			"#1BE022",
			"#FFA200",
			"#45CAFF"
		];
		var levelSeriesArray = [];
		for (var i = 0; i < levelSeries.length; i++) {
			try {
				levelSeriesArray.push({
					color: colors[i],
					shadow: false,
					label: names[i]
				});
			} catch (e) { }
		}

		var quizLevelInfo = $("#MainContent_quizLevelInfo").val();
		quizLevelInfo = quizLevelInfo.substring(0, quizLevelInfo.length - 1);
		levelSeries.push(quizLevelInfo.split(','));

		levelSeriesArray.push({
			shadow: false,
			color: "#F6FF00",
			label: 'Level Count for Quiz'
		});
		var levelMax = Math.max.apply(Math, quizLevelInfo.split(',')) + 1;

		var levelOptions = {
			seriesDefaults: {
				renderer: $.jqplot.BarRenderer,
				pointLabels: { show: true }
			},
			axes: {
				xaxis: {
					renderer: $.jqplot.CategoryAxisRenderer,
					ticks: levels
				},
				yaxis: {
					max: levelMax,
					tickInterval: 1
				}
			},
			grid: {
				shadow: false, borderWidth: 1.0, drawGridLines: true,
				background: "#FFF", borderColor: "#000",
				gridLineColor: '#cccccc'
			},
			title: {
				text: "Question Levels",
				textAlign: "left"
			},
			series: levelSeriesArray,
			legend: {
				show: true,
				placement: 'outsideGrid'
			}
		};

		//Finally, draw the graph.
		var levelChart = $.jqplot('levelChart', levelSeries, levelOptions);
	}

	function drawCategoriesGraph() {
		var s1 = [2, 6, 7, 10];
		var s2 = [7, 5, 3, 2];

		var catSeries = [];
		var names = [];

		var categories = $("#MainContent_hfCategories").val().substring(0, $("#MainContent_hfCategories").val().length - 1).split('|');
		
		var hiddenFields = $("input[type='hidden']");
		for (var i = 0; i < hiddenFields.length; i++) {
			if ($(hiddenFields[i]).attr('id').indexOf("attemptCategoryInfo") > -1) {
				var data = $(hiddenFields[i]).val();
				names.push(data.substring(0, data.indexOf('|')));
				var cats = data.substring(data.indexOf('|') + 1, data.length - 1);
				catSeries.push(cats.split(','));
			}
		}

		var catSeriesArray = [];
		for (var i = 0; i < catSeries.length; i++) {
			var color = (i % 2 == 0) ? "#CCC" : "#DC291E";
			try {
				catSeriesArray.push({
					color: color,
					shadow: false,
					label: names[i]
				});
			} catch (e) { }
		}

		var quizCategoryInfo = $("#MainContent_quizCategoryInfo").val();
		quizCategoryInfo = quizCategoryInfo.substring(0, quizCategoryInfo.length - 1);
		catSeries.push(quizCategoryInfo.split(','));

		catSeriesArray.push({
			shadow: false,
			color: "#F6FF00",
			label: 'Category Count for Quiz'
		});
		var catMax = Math.max.apply(Math, quizCategoryInfo.split(',')) + 1;
		
		var categoryOptions = {
			seriesDefaults: {
				renderer: $.jqplot.BarRenderer,
				pointLabels: { show: true }
			},
			axes: {
				xaxis: {
					renderer: $.jqplot.CategoryAxisRenderer,
					ticks: categories
				},
				yaxis: {
					max: catMax,
					tickInterval: 1
				}
			},
			grid: {
				shadow: false, borderWidth: 1.0, drawGridLines: true,
				background: "#FFF", borderColor: "#000",
				gridLineColor: '#cccccc'
			},
			title: {
				text: "Question Categories",
				textAlign: "left"
			},
			series: catSeriesArray,
			legend: {
				show: true,
				placement: 'outsideGrid'
			}
		};

		var categoryChart = $.jqplot('categoryChart', catSeries, categoryOptions);
	}

	$(document).ready(function () {
		try {
			drawLevelsGraph();
			drawCategoriesGraph();
		} catch (e) {}

	});

	function openPrint() {
		window.open('PrintCompareApplicants.aspx' + location.search, 'print_quiz');
	}

</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td>
			<span class="pageTitle">Compare Applicants</span>
		</td>
		<td style="vertical-align:bottom; text-align:right;">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td valign="top"><span class="ui-icon ui-icon-print"></span></td>
					<td style="width:5px;">&nbsp;</td>
					<td style="padding-bottom:5px;"><a class="dashboardLink" href="javascript:openPrint();">Print</a></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<br /><br />

<table cellpadding="0" cellspacing="0" border="0" runat="server" id="tblApplicantInfo">
	<tr></tr>
</table>
<br />
<br />

<div style="border-top: 2px solid #666">&nbsp;</div>

<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
			<div id="levelChart" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
		</td>
		<td style="padding-left:20px;">
			<div id="categoryChart" style="margin-top:20px; margin-left:20px; width:500px; height:300px;"></div>
		</td>
	</tr>
</table>

<asp:Panel ID="pnlHiddenData" runat="server">
</asp:Panel>

</asp:Content>
